<!-- 表格问答 -->

<template>
  <FormSlot :bind="`no_${obj.no}`" tip="请填写每一格" noLabel :required="obj.required === 1">
    <div class="QuestionnaireDetail-MyQuestion-table">
      <div class="flex">
        <div class="flex2" />
        <div v-for="option in obj.optionList" :key="option.key" class="flex1">{{ option.content }}</div>
      </div>

      <FormSlot v-for="question in obj.questionList" :key="question.key" noLabel>
        <div class="flex">
          <div class="flex2">{{ question.title }}</div>
          <div v-for="item in question.questionList" :key="item.key" class="flex1">
            <FormTextarea
              :bind="`no_${obj.no}_${item.no}`"
              :min="obj.min"
              :max="obj.max"
              :rows="[1, 10]"
              :disabled="disabled"
              :required="obj.required === 1"
              center
              noCount
              noTip
              noLabel
              @change="toChange"
            />
          </div>
        </div>
      </FormSlot>
    </div>
  </FormSlot>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import MyRadio from '../MyRadio'

// ============================== 导出组件 ============================== //

export default CORE.extend(MyRadio, {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyTextareaTable',

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 数据改变
     */
    toChange() {
      const { obj: { no, questionList }, form } = this

      const valueList = []

      questionList.forEach(({ questionList: subList }) => {
        subList.forEach((sub) => {
          valueList.push(form[`no_${no}_${sub.no}`] || '')
        })
      })

      form[`no_${no}`] = valueList.reduce((result, value) => value && result, 'ready')
    },
  },
})
</script>
